import React from 'react'
import ReactEChart from 'echarts-for-react';
import { changeFormat } from '@/utils/format';
export default function AttentColumn({ title, data }) {
    const xData = data.xData.map((el) => changeFormat(el))
    const options = {
        title: { text: title },
        tooltip: { trigger: 'axis' },
        yAxis: [{ type: 'value', minInterval: 1 }], // minInterVal  展示整数
        xAxis: [
            {
                type: 'category',
                data: xData,
            },
        ],
        series: [
            {
                name: '人数',
                type: 'bar',
                data: data.yData,
                label: {
                    show: true,
                    precision: 1,
                    position: 'top',
                    valueAnimation: true,
                },
            },
        ],
        dataZoom: [
            {
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                left: '9%',
                bottom: 0,
                start: 0,
                end: 60,
            },
        ],
    };
    return (
        <div className='attent-list-item' >
            <ReactEChart className="react_for_echarts" option={options} />
        </div>
    )
}
